<template>
  <div class="flexible-nav" :style="containerStyle">
    <!-- 导航项容器 -->
    <div
      class="nav-list"
      :class="{ vertical: direction === 'vertical' }"
      :style="listStyle"
    >
      <div
        v-for="(item, index) in items"
        :key="index"
        class="nav-item"
        :class="{ active: activeIndex === index && showIndicator }"
        :style="itemStyle"
        @click="handleItemClick(index, item)"
      >
        <!-- 导航项内容 -->
        <a
          class="nav-item-text"
          v-if="item.url"
          :href="item.url"
          :target="item.target || '_self'"
          :style="textStyle(index)"
        >
          {{ item.label }}
        </a>
        <span v-else :style="textStyle(index)">
          {{ item.label }}
        </span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "FlexibleNav",
  props: {
    // 导航数据
    items: {
      type: Array,
      required: true,
      validator: (value) => {
        // 验证每个item至少包含label
        return value.every((item) => typeof item.label === "string");
      },
      default: () => [],
    },
    // 排列方向：horizontal/vertical
    direction: {
      type: String,
      default: "horizontal",
      validator: (val) => ["horizontal", "vertical"].includes(val),
    },
    // 导航项间距 (px)
    itemSpacing: {
      type: Number,
      default: 0,
    },
    // 导航项内边距 (上下 px)
    itemPaddingY: {
      type: Number,
      default: 12,
    },
    // 导航项内边距 (左右 px)
    itemPaddingX: {
      type: Number,
      default: 16,
    },
    // 文字颜色
    textColor: {
      type: String,
      default: "#3D3D3D",
    },
    // 激活状态文字颜色
    activeColor: {
      type: String,
      default: "#348CF8",
    },
    // 激活索引
    activeIndex: {
      type: Number,
      default: 0,
    },
    // 是否显示激活指示器
    showIndicator: {
      type: Boolean,
      default: true,
    },
    // 激活指示器颜色
    indicatorColor: {
      type: String,
      default: "#348CF8",
    },
    // 是否加粗文字
    boldText: {
      type: Boolean,
      default: false,
    },
    marginBottom: {
      type: Number,
      default: 0,
    },
  },
  computed: {
    // 容器样式
    containerStyle() {
      return {
        width: this.direction === "vertical" ? "auto" : "100%",
      };
    },
    // 列表样式
    listStyle() {
      return {
        // 根据排列方向设置间距
        ...(this.direction === "horizontal"
          ? { marginLeft: `-${this.itemSpacing}px` }
          : { marginTop: `-${this.itemSpacing}px` }),
      };
    },
    // 导航项样式
    itemStyle() {
      return {
        // 根据排列方向设置外边距
        ...(this.direction === "horizontal"
          ? { marginLeft: `${this.itemSpacing}px` }
          : { marginTop: `${this.itemSpacing}px` }),
        padding: `${this.itemPaddingY}px ${this.itemPaddingX}px`,
        marginBottom: `${this.marginBottom}px`,
      };
    },
  },
  methods: {
    // 文字样式方法
    textStyle(index) {
      return {
        color: this.activeIndex === index ? this.activeColor : this.textColor,
        textDecoration: "none",
        fontWeight: this.activeIndex === index ? "bold" : "normal",
      };
    },
    // 处理导航项点击
    handleItemClick(index, item) {
      this.$emit("item-click", { index, item });
    },
  },
};
</script>

<style scoped>
.flexible-nav {
  box-sizing: border-box;
}

.nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  box-sizing: border-box;
}

/* 横排样式 */
.nav-list:not(.vertical) {
  flex-direction: row;
}

/* 竖排样式 */
.nav-list.vertical {
  flex-direction: column;
}

.nav-item {
  position: relative;
  cursor: pointer;
  box-sizing: border-box;
  transition: background-color 0.2s;
}

.nav-item-text:hover{

}
.nav-item:hover {
  background-color: rgba(0, 0, 0, 0.03);
}

.nav-item a,
.nav-item span {
  display: inline-block;
  transition: color 0.2s;
}

/* 使用content方式实现激活下划线 */
.nav-item.active {
  position: relative;
}

/* 水平方向下划线 */
.nav-list:not(.vertical) .nav-item.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 14px;
  width: 69%;
  height: 4px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  background-color: v-bind(indicatorColor);
  transition: background-color 0.2s;
}

/* 垂直方向下划线 */
.nav-list.vertical .nav-item.active::after {
  content: "";
  position: absolute;
  top: 40px;
  left: 14px;
  width: 33%;
  height: 4px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  background-color: v-bind(indicatorColor);
  transition: background-color 0.2s;
}
</style>
